<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端导航 | 小马过河</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/img/manong.jpg">
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/img/mxx-152-152.png">
    <meta name="description" content="学习网站站点便捷导航">
    <meta name="keywords" content="站点导航 前端 导航  马新想 小马学习 编程学习">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="theme-color" content="#ededed">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage" content="/img/mxx-144.png">
    
    <link rel="preload" href="/assets/css/0.styles.154256f1.css" as="style"><link rel="preload" href="/assets/js/app.f1a8d465.js" as="script"><link rel="preload" href="/assets/js/2.5bab2b7d.js" as="script"><link rel="preload" href="/assets/js/64.5982f68e.js" as="script"><link rel="preload" href="/assets/js/10.586b05b4.js" as="script"><link rel="preload" href="/assets/js/3.c22f362a.js" as="script"><link rel="prefetch" href="/assets/js/100.17640669.js"><link rel="prefetch" href="/assets/js/101.9c523894.js"><link rel="prefetch" href="/assets/js/102.27347aba.js"><link rel="prefetch" href="/assets/js/103.37a029fe.js"><link rel="prefetch" href="/assets/js/104.1d8f728c.js"><link rel="prefetch" href="/assets/js/105.8081ec6e.js"><link rel="prefetch" href="/assets/js/11.28ad280e.js"><link rel="prefetch" href="/assets/js/12.5e108f27.js"><link rel="prefetch" href="/assets/js/13.3678126c.js"><link rel="prefetch" href="/assets/js/14.505a08b7.js"><link rel="prefetch" href="/assets/js/15.8f3c0c53.js"><link rel="prefetch" href="/assets/js/16.4256e6cb.js"><link rel="prefetch" href="/assets/js/17.17d3d968.js"><link rel="prefetch" href="/assets/js/18.73488ae7.js"><link rel="prefetch" href="/assets/js/19.9d056309.js"><link rel="prefetch" href="/assets/js/20.52185694.js"><link rel="prefetch" href="/assets/js/21.3b7e8437.js"><link rel="prefetch" href="/assets/js/22.4d4d8a8b.js"><link rel="prefetch" href="/assets/js/23.dac1a360.js"><link rel="prefetch" href="/assets/js/24.798b5147.js"><link rel="prefetch" href="/assets/js/25.16d30679.js"><link rel="prefetch" href="/assets/js/26.3e5e50ab.js"><link rel="prefetch" href="/assets/js/27.99e01b84.js"><link rel="prefetch" href="/assets/js/28.86b7c539.js"><link rel="prefetch" href="/assets/js/29.ea981f89.js"><link rel="prefetch" href="/assets/js/30.6c923d43.js"><link rel="prefetch" href="/assets/js/31.df940781.js"><link rel="prefetch" href="/assets/js/32.3e5a19c7.js"><link rel="prefetch" href="/assets/js/33.0936aa71.js"><link rel="prefetch" href="/assets/js/34.566820dc.js"><link rel="prefetch" href="/assets/js/35.e263f3e4.js"><link rel="prefetch" href="/assets/js/36.32ae1d3b.js"><link rel="prefetch" href="/assets/js/37.ac0fe1ce.js"><link rel="prefetch" href="/assets/js/38.5ff1b8eb.js"><link rel="prefetch" href="/assets/js/39.da39237f.js"><link rel="prefetch" href="/assets/js/4.dca68745.js"><link rel="prefetch" href="/assets/js/40.c92cf280.js"><link rel="prefetch" href="/assets/js/41.b2318f21.js"><link rel="prefetch" href="/assets/js/42.9e98acc0.js"><link rel="prefetch" href="/assets/js/43.6a890842.js"><link rel="prefetch" href="/assets/js/44.8c501675.js"><link rel="prefetch" href="/assets/js/45.a7b73149.js"><link rel="prefetch" href="/assets/js/46.08c4dcbb.js"><link rel="prefetch" href="/assets/js/47.0fa3a317.js"><link rel="prefetch" href="/assets/js/48.15f53959.js"><link rel="prefetch" href="/assets/js/49.f9b62975.js"><link rel="prefetch" href="/assets/js/5.49ddc4eb.js"><link rel="prefetch" href="/assets/js/50.5d678fce.js"><link rel="prefetch" href="/assets/js/51.f07100da.js"><link rel="prefetch" href="/assets/js/52.25782c95.js"><link rel="prefetch" href="/assets/js/53.1151ca9a.js"><link rel="prefetch" href="/assets/js/54.86132d90.js"><link rel="prefetch" href="/assets/js/55.5e273c50.js"><link rel="prefetch" href="/assets/js/56.94d89ae7.js"><link rel="prefetch" href="/assets/js/57.ff4f6ce5.js"><link rel="prefetch" href="/assets/js/58.d6bba7bf.js"><link rel="prefetch" href="/assets/js/59.fd39aa8f.js"><link rel="prefetch" href="/assets/js/6.73ba3b93.js"><link rel="prefetch" href="/assets/js/60.3b547209.js"><link rel="prefetch" href="/assets/js/61.c2746621.js"><link rel="prefetch" href="/assets/js/62.c7246830.js"><link rel="prefetch" href="/assets/js/63.8cf018aa.js"><link rel="prefetch" href="/assets/js/65.6a323f0b.js"><link rel="prefetch" href="/assets/js/66.df6d599d.js"><link rel="prefetch" href="/assets/js/67.5c26c24c.js"><link rel="prefetch" href="/assets/js/68.e53dceea.js"><link rel="prefetch" href="/assets/js/69.65ee4851.js"><link rel="prefetch" href="/assets/js/7.541920c5.js"><link rel="prefetch" href="/assets/js/70.4bfafea4.js"><link rel="prefetch" href="/assets/js/71.b4f496a8.js"><link rel="prefetch" href="/assets/js/72.1b1ffea6.js"><link rel="prefetch" href="/assets/js/73.8929e1c4.js"><link rel="prefetch" href="/assets/js/74.d3c5fcad.js"><link rel="prefetch" href="/assets/js/75.9d01a456.js"><link rel="prefetch" href="/assets/js/76.3149b796.js"><link rel="prefetch" href="/assets/js/77.3abe6bd4.js"><link rel="prefetch" href="/assets/js/78.ae477312.js"><link rel="prefetch" href="/assets/js/79.00837d52.js"><link rel="prefetch" href="/assets/js/8.a50175f7.js"><link rel="prefetch" href="/assets/js/80.d626622b.js"><link rel="prefetch" href="/assets/js/81.ad2df06d.js"><link rel="prefetch" href="/assets/js/82.9ac0d88a.js"><link rel="prefetch" href="/assets/js/83.b23219b4.js"><link rel="prefetch" href="/assets/js/84.55f2741f.js"><link rel="prefetch" href="/assets/js/85.33b715e5.js"><link rel="prefetch" href="/assets/js/86.85aea4fa.js"><link rel="prefetch" href="/assets/js/87.6fd2f3fa.js"><link rel="prefetch" href="/assets/js/88.a9ea00b4.js"><link rel="prefetch" href="/assets/js/89.7e58e472.js"><link rel="prefetch" href="/assets/js/9.83acbe8c.js"><link rel="prefetch" href="/assets/js/90.e15687d5.js"><link rel="prefetch" href="/assets/js/91.026b108a.js"><link rel="prefetch" href="/assets/js/92.840afd12.js"><link rel="prefetch" href="/assets/js/93.00439ef2.js"><link rel="prefetch" href="/assets/js/94.6c994a63.js"><link rel="prefetch" href="/assets/js/95.e3dd6367.js"><link rel="prefetch" href="/assets/js/96.cbe1207c.js"><link rel="prefetch" href="/assets/js/97.34584059.js"><link rel="prefetch" href="/assets/js/98.9b2de21d.js"><link rel="prefetch" href="/assets/js/99.95d4993f.js">
    <link rel="stylesheet" href="/assets/css/0.styles.154256f1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="layout-wrapper"><!----> <div class="theme-container"><header class="navbar ele-navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/manong.jpg" alt="小马过河" class="logo"> <span class="site-name can-hide">小马过河</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" class="nav-link">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav> <div class="loginItem"><!----></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" class="nav-link">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/nav/nav.html" class="sidebar-link">站点导航</a></li><li><a href="/nav/web.html" aria-current="page" class="active sidebar-link">前端导航</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/nav/web.html#css导航" class="sidebar-link">CSS导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#javascript导航" class="sidebar-link">JavaScript导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#typescript导航" class="sidebar-link">TypeScript导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#vue导航" class="sidebar-link">Vue导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#react导航" class="sidebar-link">React导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#webpack导航" class="sidebar-link">Webpack导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#微信导航" class="sidebar-link">微信导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#nodejs导航" class="sidebar-link">NodeJS导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#electron导航" class="sidebar-link">Electron导航</a></li><li class="sidebar-sub-header"><a href="/nav/web.html#工具类导航" class="sidebar-link">工具类导航</a></li></ul></li><li><a href="/nav/afterEnd.html" class="sidebar-link">JAVA导航</a></li></ul> </aside> <main class="page"> <div class="main"><div class="content"><div class="theme-default-content content__default"><h1 id="前端导航"><a href="#前端导航" class="header-anchor">#</a> 前端导航</h1> <p>🐴</p> <div><h2 id="css导航"><a href="#css导航" class="header-anchor">#</a> CSS导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>官方导航</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个HTML CSS 兼容性查询网站" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://caniuse.com/img/favicon-128.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>CanIUse</div></div> <div class="cardDescription" data-v-30514372>一个HTML CSS 兼容性查询网站</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="http://s.nodejs.cn/less/img/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Less</div></div> <div class="cardDescription" data-v-30514372>Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Sass(Scss)是稳定和强大的专业级CSS扩展语言" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://www.sass.hk/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Sass</div></div> <div class="cardDescription" data-v-30514372>Sass(Scss)是稳定和强大的专业级CSS扩展语言</div></div></a></div></div></div></div> <h2 id="javascript导航"><a href="#javascript导航" class="header-anchor">#</a> JavaScript导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>基础学习</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="ES6是JavaScript 语言的一代版本，该网站为阮一峰老师的 《ECMAScript 6 入门教程》" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/es6.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>ES6</div></div> <div class="cardDescription" data-v-30514372>ES6是JavaScript 语言的一代版本，该网站为阮一峰老师的 《ECMAScript 6 入门教程》</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://babel.docschina.org/img/favicon.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Babel</div></div> <div class="cardDescription" data-v-30514372>Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码</div></div></a></div></div></div></div> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>优秀插件</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://wendux.github.io/dist/static/doc/flyio/fly.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>FlyJs</div></div> <div class="cardDescription" data-v-30514372>一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。</div></div></a></div></div></div></div> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>优秀文章</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个好博客文章" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://github.com/fluidicon.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>浩麟的博客</div></div> <div class="cardDescription" data-v-30514372>一个好博客文章</div></div></a></div></div></div></div> <h2 id="typescript导航"><a href="#typescript导航" class="header-anchor">#</a> TypeScript导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:none;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc></p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="TypeScript中文文档" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://www.tslang.cn/assets/images/icons/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>TS</div></div> <div class="cardDescription" data-v-30514372>TypeScript中文文档</div></div></a></div></div></div></div> <h2 id="vue导航"><a href="#vue导航" class="header-anchor">#</a> Vue导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>官方导航</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个 渐进式得 JavaScript （前端）框架" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://cn.vuejs.org/images/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Vue2.0</div></div> <div class="cardDescription" data-v-30514372>一个 渐进式得 JavaScript （前端）框架</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个 渐进式得 JavaScript （前端）框架" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://cn.vuejs.org/images/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Vue3.0</div></div> <div class="cardDescription" data-v-30514372>一个 渐进式得 JavaScript （前端）框架</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/vuex-store.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Vuex</div></div> <div class="cardDescription" data-v-30514372>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://cn.vuejs.org/images/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>VueRouter</div></div> <div class="cardDescription" data-v-30514372>Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Vue.js 开发的标准工具" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/vuex-cli.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Vue CLI</div></div> <div class="cardDescription" data-v-30514372>Vue.js 开发的标准工具</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="vue-loader 是一个 webpack 的 loader" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://cn.vuejs.org/images/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Vue Loader</div></div> <div class="cardDescription" data-v-30514372>vue-loader 是一个 webpack 的 loader</div></div></a></div></div></div></div> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>组件导航</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套vue组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://element.eleme.cn/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>ElementVue</div></div> <div class="cardDescription" data-v-30514372>一套vue组件库</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套vue组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://qn.antdv.com/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>AntVue</div></div> <div class="cardDescription" data-v-30514372>一套vue组件库</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套基于ElementUI 高度封装的vue组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://www.avuejs.com/images/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Avue</div></div> <div class="cardDescription" data-v-30514372>一套基于ElementUI 高度封装的vue组件库</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套轻量、可靠的移动端 Vue 组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://img01.yzcdn.cn/vant/logo.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Vant</div></div> <div class="cardDescription" data-v-30514372>一套轻量、可靠的移动端 Vue 组件库</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套京东风格的轻量级移动端Vue组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://nutui.jd.com/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>NutUI</div></div> <div class="cardDescription" data-v-30514372>一套京东风格的轻量级移动端Vue组件库</div></div></a></div></div></div></div> <h2 id="react导航"><a href="#react导航" class="header-anchor">#</a> React导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>官方导航</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个用于构建用户界面的 JavaScript 库 中文网站" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/react.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>React官网</div></div> <div class="cardDescription" data-v-30514372>一个用于构建用户界面的 JavaScript 库 中文网站</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/react.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>ReactRouter</div></div> <div class="cardDescription" data-v-30514372>React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Redux 是 JavaScript 状态容器，提供可预测化的状态管理。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/redux-action.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Redux</div></div> <div class="cardDescription" data-v-30514372>Redux 是 JavaScript 状态容器，提供可预测化的状态管理。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="redux-saga 是一个 redux 中间件, 一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/redux-action.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>ReduxsSaga</div></div> <div class="cardDescription" data-v-30514372>redux-saga 是一个 redux 中间件, 一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title=" mobx是一个简单可扩展的状态管理库。 mobx vs redux mobx是学习成本更低,性能更好的状态解决方案。 mobx开发难度低; mobx代码量少" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://cn.mobx.js.org/mobx.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>MobX</div></div> <div class="cardDescription" data-v-30514372> mobx是一个简单可扩展的状态管理库。 mobx vs redux mobx是学习成本更低,性能更好的状态解决方案。 mobx开发难度低; mobx代码量少</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/dvajs.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>DvaJS</div></div> <div class="cardDescription" data-v-30514372>dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Umi 是可扩展的企业级前端应用框架,是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>UmiJS</div></div> <div class="cardDescription" data-v-30514372>Umi 是可扩展的企业级前端应用框架,是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。</div></div></a></div></div></div></div> <div class="navItem" data-v-106364cc><div class="navLine" style="display:;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc>组件导航</p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套React组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://qn.antdv.com/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Ant</div></div> <div class="cardDescription" data-v-30514372>一套React组件库</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一个基于react 和 ant 的开箱即用的中台前端/设计解决方案文档" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://qn.antdv.com/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>AntPro</div></div> <div class="cardDescription" data-v-30514372>一个基于react 和 ant 的开箱即用的中台前端/设计解决方案文档</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="一套Ant Pro 构建文档" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://qn.antdv.com/favicon.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>ProComponents</div></div> <div class="cardDescription" data-v-30514372>一套Ant Pro 构建文档</div></div></a></div></div></div></div> <h2 id="webpack导航"><a href="#webpack导航" class="header-anchor">#</a> Webpack导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:none;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc></p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://webpack.docschina.org/icon-square-small.85ba630cf0c5f29ae3e3.svg" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Webpack</div></div> <div class="cardDescription" data-v-30514372>webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用</div></div></a></div></div></div></div> <h2 id="微信导航"><a href="#微信导航" class="header-anchor">#</a> 微信导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:none;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc></p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="小程序官方文档" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>小程序文档</div></div> <div class="cardDescription" data-v-30514372>小程序官方文档</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="WeUI是一个小程序官方组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>WeUI</div></div> <div class="cardDescription" data-v-30514372>WeUI是一个小程序官方组件库</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Vant Weapp - 轻量、可靠的小程序 UI 组件库" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://img.yzcdn.cn/zanui/vant/vant-2017-12-18.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>WeUI</div></div> <div class="cardDescription" data-v-30514372>Vant Weapp - 轻量、可靠的小程序 UI 组件库</div></div></a></div></div></div></div> <h2 id="nodejs导航"><a href="#nodejs导航" class="header-anchor">#</a> NodeJS导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:none;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc></p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/nodejs.jpg" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>NodeJS</div></div> <div class="cardDescription" data-v-30514372>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Express4.17.1基于 Node.js 平台，快速、开放、极简的 Web 开发框架" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://www.expressjs.com.cn/images/favicon.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Express</div></div> <div class="cardDescription" data-v-30514372>Express4.17.1基于 Node.js 平台，快速、开放、极简的 Web 开发框架</div></div></a></div></div></div></div> <h2 id="electron导航"><a href="#electron导航" class="header-anchor">#</a> Electron导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:none;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc></p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Electron 是一使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://www.electronjs.org/images/favicon.b7a59262df48d6563400baf5671da548.ico" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>Electron</div></div> <div class="cardDescription" data-v-30514372>Electron 是一使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序</div></div></a></div></div></div></div> <h2 id="工具类导航"><a href="#工具类导航" class="header-anchor">#</a> 工具类导航</h2> <div class="navItem" data-v-106364cc><div class="navLine" style="display:none;" data-v-106364cc><p class="line" data-v-106364cc></p> <p class="text" data-v-106364cc></p> <p class="line" data-v-106364cc></p></div> <div class="el-row" style="margin-left:-5px;margin-right:-5px;" data-v-106364cc><div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="img/website/alishiliang.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>阿里图标</div></div> <div class="cardDescription" data-v-30514372>Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="Visual Studio Code是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://code.visualstudio.com/apple-touch-icon.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>VScode</div></div> <div class="cardDescription" data-v-30514372>Visual Studio Code是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器</div></div></a></div></div> <div class="el-col el-col-24 el-col-xs-12 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4" style="padding-left:5px;padding-right:5px;" data-v-30514372><div class="cardWrapper" data-v-30514372><a target="_blank" class="aFlag" data-v-30514372><div title="ESLint是一个JavaScript代码自动格式化，检测的工具" class="card" data-v-30514372><div class="cardTop" data-v-30514372><div class="cardLogo" data-v-30514372><!----> <img src="https://cn.eslint.org/img/favicon.512x512.png" class="img" data-v-30514372></div> <div class="cardTitle" data-v-30514372>ESLint</div></div> <div class="cardDescription" data-v-30514372>ESLint是一个JavaScript代码自动格式化，检测的工具</div></div></a></div></div></div></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最近更新时间:</span> <span class="time">7/2/2021, 11:27:27 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/nav/nav.html" class="prev">
        站点导航
      </a></span> <span class="next"><a href="/nav/afterEnd.html">
        JAVA导航
      </a>
      →
    </span></p></div></div> <!----></div> </main></div></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.f1a8d465.js" defer></script><script src="/assets/js/2.5bab2b7d.js" defer></script><script src="/assets/js/64.5982f68e.js" defer></script><script src="/assets/js/10.586b05b4.js" defer></script><script src="/assets/js/3.c22f362a.js" defer></script>
  </body>
</html>
